<template>
    <div>
        <div style="display: flex;justify-content: center;align-content: center;width: 1200px;margin: 0 auto" >
            <div style="width: 600px;margin: 10px auto">
                <el-menu
                    :default-active="routeTitle"
                    class="el-menu-demo"
                    mode="horizontal"
                    @select="handleSelect"
                    style="width: 100%;margin: 0 auto;display: flex;justify-content: space-around"
                >
                    <el-menu-item :index="msg.name" :key="msg.id" v-for="(msg,index) in courseStore.headerList" style="margin-right: 50px" @click="toPart(msg)">{{msg.title}}</el-menu-item>
                </el-menu>
            </div>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang='ts'>
import {computed, onMounted, ref} from "vue";
import {useCourseStore} from "@/store/course";
import type {HeaderDataModel} from "@/mock/course";
import {useRoute, useRouter} from "vue-router";
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const courseStore=useCourseStore()
const router=useRouter()
const route=useRoute()
const routeTitle=ref('Vip1')
const toPart=(msg:HeaderDataModel)=>{
    console.log(999999999,msg.name)
    router.push({
        name:msg.name
    })
    routeTitle.value=msg.name
}

onMounted(()=>{
    courseStore.getHeader()
})
</script>
<style scoped>
</style>
